/**
 * 输入框组件导出处理
 * 用于生成输入框组件的HTML和JS代码
 */

export default {
  /**
   * 生成输入框组件的HTML代码
   * @param {Object} component 组件数据
   * @param {Object} options 导出选项
   * @returns {String} HTML代码
   */
  generateHTML(component, options = {}) {
    const { id, style = {}, props = {} } = component;
    
    // 获取组件数据
    const datas = props.datas || {};
    
    // 提取输入框属性
    const value = datas.value || '';
    const placeholder = datas.placeholder || '';
    const type = datas.type || 'text';
    const disabled = datas.disabled ? 'disabled' : '';
    const maxlength = datas.maxlength ? `maxlength="${datas.maxlength}"` : '';
    const readonly = datas.readonly ? 'readonly' : '';
    const required = datas.required ? 'required' : '';
    const clearable = datas.clearable ? 'data-clearable="true"' : '';
    const showPassword = datas.showPassword && type === 'password' ? 'data-show-password="true"' : '';
    
    // 处理前缀图标和后缀图标
    const prefixIcon = datas.prefixIcon ? `<span class="el-input__prefix"><i class="el-icon-${datas.prefixIcon}"></i></span>` : '';
    const suffixIcon = datas.suffixIcon ? `<span class="el-input__suffix"><i class="el-icon-${datas.suffixIcon}"></i></span>` : '';
    
    // 构建标签部分
    let labelHtml = '';
    if (datas.labelText) {
      const requiredMark = datas.required ? '<span class="required-mark">*</span>' : '';
      const labelWidth = datas.labelWidth ? `style="width: ${datas.labelWidth};"` : '';
      labelHtml = `<div class="input-label" ${labelWidth}>${requiredMark}${datas.labelText}</div>`;
    }
    
    // 生成输入框HTML
    let inputHtml;
    if (type === 'textarea') {
      const rows = datas.rows ? `rows="${datas.rows}"` : 'rows="2"';
      inputHtml = `
<div class="el-textarea">
  <textarea
    id="${id}-input"
    class="el-textarea__inner"
    placeholder="${placeholder}"
    ${disabled}
    ${readonly}
    ${required}
    ${maxlength}
    ${rows}
  >${value}</textarea>
</div>`;
    } else {
      inputHtml = `
<div class="el-input">
  ${prefixIcon}
  <input
    id="${id}-input"
    type="${type}"
    class="el-input__inner"
    placeholder="${placeholder}"
    value="${value}"
    ${disabled}
    ${readonly}
    ${required}
    ${maxlength}
    ${clearable}
    ${showPassword}
  />
  ${suffixIcon}
</div>`;
    }
    
    // 完整的组件HTML
    return `
<div id="${id}" class="input-component" style="${this.generateStyle(style)}">
  ${labelHtml}
  ${inputHtml}
</div>`;
  },
  
  /**
   * 生成输入框组件的JS代码
   * @param {Object} component 组件数据
   * @param {Object} options 导出选项
   * @returns {String} JS代码
   */
  generateJS(component, options = {}) {
    const { id, props = {} } = component;
    const datas = props.datas || {};
    const inputId = `${id}-input`;
    let js = '';
    
    // 基本的输入监听
    js += `
// 输入框事件处理 - ${id}
document.getElementById("${inputId}").addEventListener("input", function(event) {
  const value = this.value;
  console.log("Input value changed:", value);
`;
    
    // 如果定义了输入处理函数，则添加
    if (datas.inputHandler) {
      js += `  // 用户定义的处理函数
  ${datas.inputHandler}
`;
    }
    
    js += `});`;
    
    // 如果是可清除的输入框，添加清除按钮功能
    if (datas.clearable) {
      js += `
// 清除按钮功能
const input = document.getElementById("${inputId}");
if (input.dataset.clearable === "true") {
  const clearButton = document.createElement("span");
  clearButton.className = "el-input__clear";
  clearButton.innerHTML = "×";
  clearButton.style.display = "none";
  
  input.parentNode.appendChild(clearButton);
  
  // 显示/隐藏清除按钮
  input.addEventListener("input", function() {
    clearButton.style.display = this.value ? "inline" : "none";
  });
  
  // 清除输入值
  clearButton.addEventListener("click", function() {
    input.value = "";
    clearButton.style.display = "none";
    input.dispatchEvent(new Event("input"));
  });
}`;
    }
    
    // 如果是密码框且支持显示密码
    if (datas.type === 'password' && datas.showPassword) {
      js += `
// 密码显示/隐藏功能
const passwordInput = document.getElementById("${inputId}");
if (passwordInput.dataset.showPassword === "true") {
  const toggleButton = document.createElement("span");
  toggleButton.className = "el-input__suffix-inner el-input__password";
  toggleButton.innerHTML = '<i class="el-icon-view"></i>';
  
  const suffix = document.createElement("span");
  suffix.className = "el-input__suffix";
  suffix.appendChild(toggleButton);
  passwordInput.parentNode.appendChild(suffix);
  
  // 切换密码显示
  toggleButton.addEventListener("click", function() {
    const type = passwordInput.type;
    passwordInput.type = type === "password" ? "text" : "password";
    toggleButton.innerHTML = passwordInput.type === "password" 
      ? '<i class="el-icon-view"></i>' 
      : '<i class="el-icon-hide"></i>';
  });
}`;
    }
    
    return js;
  },
  
  /**
   * 生成样式字符串
   * @param {Object} style 样式对象
   * @returns {String} 样式字符串
   */
  generateStyle(style = {}) {
    // 基础样式
    const baseStyle = {
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      ...style
    };
    
    // 转换为样式字符串
    return Object.entries(baseStyle)
      .map(([key, value]) => {
        // 将驼峰命名转换为连字符命名
        const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
        return `${cssKey}: ${value};`;
      })
      .join(' ');
  },
  
  /**
   * 导出所需的资源
   */
  resources: [
    { type: 'css', path: './element-ui.css' }, // Element UI样式
    { type: 'css', path: './custom-input.css' } // 自定义输入框样式
  ]
}; 